<template>
  <!-- 环境数据录入-->
  <BaseMainSlot :show-tab="true">
    <template v-slot:btn-box>
      <ActionBar
        :page-no="24"
        :has-cancel="false"
        :has-edit="false"
        :add-active="addActive"
        :has-edit-column="true"
        :has-export="false"
        :has-del="false"
        @showColumn="showColumn"
        @add="add"
      />
    </template>
    <template v-slot:search-box>
      <SearchForm
        :formConfig="formConfig"
        :formData="searchlist"
        @search="search"
      ></SearchForm>
    </template>
    <template v-slot:table-box>
      <Table
        @sortChange="changeTableSort"
        :propList="tableColumn"
        v-loading="loading"
        :listData="tableData"
        :showSelectColumn="false"
      >
      <template v-slot:operation="{ row }">
          <template v-if="!row.index">
            <el-button
              v-if="judgePermission(24, 'delete')"
              class="text-btn-cursor cursor-delete"
              type="text"
              size="small"
              @click="delmessage(row)"
            >
              <i class="el-icon-delete"></i> 删除
            </el-button>
          </template>
        </template>
      </Table>
      <Pagination
        :page-size="pageSize"
        :current-page="currentPage"
        :total-size="totalSize"
        @changePageSize="changePageSize"
        @changeCurrentPage="changeCurrentPage"
      />
    </template>
    <template v-slot:dialog>
      <el-dialog
        title="环境数据"
        :visible.sync="dialogFormVisible"
        :before-close="cancel"
      >
        <el-form
          ref="formData"
          label-position="left"
          :model="formData"
          :rules="rules"
        >
          <el-form-item prop="dataTypeName" class="w100p" label="数据项类别名称：">
            <el-input v-model="formData.dataTypeName" placeholder="请输入数据项类别名称"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button class="zh-button-one" @click="cancel('formData')">
            取 消
          </el-button>
          <el-button
            class="zh-button-two"
            type="primary"
            @click="save"
          >
            保 存
          </el-button>
        </div>
      </el-dialog>
      <!-- 列配置 -->
      <el-dialog
        id="tableColumnDialog"
        title="配置列"
        :visible.sync="dialogTableColumnVisible"
      >
        <tableColumn
          v-if="dialogTableColumnVisible"
          ref="tableColumn"
          :tableColumn="allTableColumn"
          @cancelColumn="cancelColumn"
        />
        <div slot="footer" class="dialog-footer">
          <el-button
            class="zh-button-one"
            @click="dialogTableColumnVisible = false"
          >
            取 消
          </el-button>
          <el-button class="zh-button-two" type="primary" @click="saveColumn">
            保 存
          </el-button>
        </div>
      </el-dialog>
    </template>
  </BaseMainSlot>
</template>

<script>
import { mapGetters } from "vuex";
import SearchForm from "@/components/searchForm";
import Table from "@/components/table/table.vue";
import ActionBar from "@/components/ActionBar";
import Pagination from "@/components/Pagination";
import BaseMainSlot from "@/components/BaseMainSlot/newBaseMainSlot.vue";
import { mymixin } from "@/utils/mixin";
import Api from "@/api/digital-production/material-link-monitoring/environmental-data-entry/index";
export default {
  name: "ManualDataCategoryManagement",
  components: {
    SearchForm,
    ActionBar,
    Table,
    Pagination,
    BaseMainSlot,
  },
  computed: {
    ...mapGetters({
      judgePermission: "permission/judgePermission"
    })
  },
  mounted() {
    this.getTableData();
    this.loading = true;
  },
  mixins: [mymixin],
  data() {
    return {
      addActive: true,
      currentPage: 1,
      pageSize: 10,
      totalSize: 1,
      tableColumn: [
        { prop: "dataTypeName", label: "数据项类别名称", minWidth: "400px" },
        { prop: 'operation', label: '操作', slotName: 'operation', width: "140" }
      ],
      formConfig: [
        {
          label: "数据项名称",
          prop: "dataTypeName",
          type: "input",
        },
      ],
      dialogFormVisible: false,
      rules: {
        dataTypeName: [
          {
            required: true,
            message: "录入人不能为空",
            trigger: ["blur", "change"],
          },
        ],
      },
      formData: {
        dataTypeName: "",
      },
      //   数据项
      dataItemList: [],
      departmentList: [],
      postList: [],
      staffList: [],
      // 批量删除
      nowselectedList: [],
      // 单位列表
      unitlist: [],
      isInputFlag: true,
      // TODO:
      searchlist: {
        dataTypeName: "",
      },
    };
  },
  methods: {
    search(e) {
      this.currentPage = 1;
      this.searchlist = { ...e };
      this.getTableData(e.dataTypeName);
    },
    // 获取表格数据
    async getTableData(dataTypeName = "") {
      let params = {
        page: this.currentPage,
        size: this.pageSize,
        entity: {
          organizationNo: sessionStorage.getItem("organizationNo"),
          dataTypeName: dataTypeName,
        },
      };
      this.entity = params.entity;
      let res = await Api.queryDataItemList(params);
      this.loading = false;
      this.tableData = res.data.content;
      if (this.tableData.length === 0 && this.currentPage > 1) {
        this.currentPage--;
        this.getTableData();
      }
      this.totalSize = res.data.totalElements;
    },
    // 添加
    add() {
      this.dialogFormVisible = true;
      this.addActive = false;
      this.formData = {};
    },
    save() {
      this.$refs.formData.validate(async (valid) => {
        if (valid) {
          let params = {
            dataTypeName: this.formData.dataTypeName,
            isManualEntry: true,
          };
          let res = await Api.addItem(params);
          if (res.code === 1) {
            this.$message.success("手动添加物联数据项成功！");
            this.dialogFormVisible = false
            this.getTableData()
            this.addActive = true
          } else {
            this.$message.error("手动添加物联数据项失败！");
          }
        } else {
          return false;
        }
      });
    },
    changePageSize(pageSize) {
      this.pageSize = pageSize;
      this.getTableData(this.searchlist.dataTypeName);
    },
    changeCurrentPage(currentPage) {
      this.currentPage = currentPage;
      this.getTableData(this.searchlist.dataTypeName);
    },
    cancel() {
      this.$nextTick(() => {
        this.$refs.formData.resetFields();
      });
      this.isInputFlag = true;
      this.formData = {};
      this.dataItemList = [];
      this.dialogFormVisible = false;
      this.addActive = true;
      this.delActive = false;
    },
     // 排序
    changeTableSort(column) {
      this.sortList = column.order? [
          {
              property: column.prop,
              direction: column.order == "ascending" ? "asc" : "desc",
            },
          ]
        : [];
      this.getTableData();
    },
    delmessage(row) {
      this.$confirm("此操作将永久删除该条数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        customClass: "myClass"
      })
        .then(async() => {
          console.log('www');
          let res = await Api.delItem(row.dataTypeConfigId)
          if(res.code === 1) {
            this.getTableData();
            this.$message.success(res.msg);
          } else {
            this.$message.error(res.msg);
          }
        })
        .catch(() => {
          //
          this.$message("取消删除");
        });
    }
  },
};
</script>

<style lang="scss" scoped>
</style>